<template>
  <article class="col-7 fl">
    <div class="u-r-cont">
      <section>
        <div>
          <section class="c-infor-tabTitle c-tab-title">
            <a href="javascript: void(0)" title="我的收藏" class="current">
              收藏列表
            </a>
          </section>
        </div>
        <div class="mt40">
          <section class="no-data-wrap" v-if="collectList.length === 0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">您还没有收藏课程哦！</span>
          </section>

          <!-- 表格 -->
          <el-table border :data="collectList" fit highlight-current-row v-else>
            <el-table-column label="课程信息" align="center" prop="courseTitle">
            </el-table-column>
            <el-table-column label="讲师名称" align="center" prop="teacherName">
            </el-table-column>
            <el-table-column
              label="价格"
              width="100"
              align="center"
              prop="totalFee"
            >
            </el-table-column>
            <el-table-column label="收藏时间" align="center" prop="gmtCreate">
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="
                    $router.push({ path: `/course/${scope.row.courseId}` })
                  "
                  >查看</el-button
                >
                <el-button
                  type="warning"
                  size="mini"
                  @click="deleteCollect(scope.row.courseId)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
    </div>
  </article>
</template>

<script>
import collectApi from "~/api/collect/collect";
import cookie from "js-cookie";

export default {
  data() {
    return {
      collectList: [],
    };
  },
  created() {
    let token = cookie.get("guli-cookie-jwt");
    if (!token) {
      return false;
    }

    this.findAll();
  },
  methods: {
    // 移除收藏
    deleteCollect(courseId) {
      // 删除订单
      collectApi.delCollect(courseId).then((result) => {
        // 刷新页面
        window.location = '/ucenter/collect'
      });
    },
    // 查询这个用户的所有收藏信息
    findAll() {
      collectApi.findAllCollect().then((result) => {
        if (result.code === 20000) {
          this.collectList = result.data;
        }
      });
    },
  },
};
</script>
